<template>
  <div id="menu-item">
    <div class="logo">{{ title }} </div>
    <a-menu theme="dark" mode="inline" :default-selected-keys="[0]">
      <!-- 选项 -->
      <template v-for="(item,i) in menus">
        <!-- 1级 普通 菜单 -->
        <a-menu-item v-bind:key="i" v-if=" ! item.sub.length" @click="route(item.path)">
          <a-icon :type="item.icon" />
          <span>{{item.title}}</span>
        </a-menu-item>
        <!-- 1级 含 子菜单 -->
        <a-sub-menu v-bind:key="i"  v-if="item.sub.length">
          <span slot="title">
            <a-icon :type="item.icon" />
            <span>{{item.title}}</span>
          </span>
          <!-- 2级菜单 -->
          <template v-for="(item2,i2) in item.sub">
            <!-- 2级 普通 菜单 -->
            <a-menu-item v-bind:key="'sub2_' + i + '_' + i2"  v-if=" ! item2.sub.length" @click="route(item2.path)">
              {{ item2.title }}
            </a-menu-item>
            <!-- 2级 含 子菜单 -->
            <a-sub-menu :title="item2.title" v-bind:key="'sub2_' + i + '_' + i2"  v-if="item2.sub.length">
              <a-menu-item v-bind:key="'sub3_' + i + '_' + i2 + '_' + i3" v-for="(item3,i3) in item2.sub" @click="route(item3.path)">
                {{ item3.title }}
              </a-menu-item>
            </a-sub-menu>
          </template >
        </a-sub-menu>
      </template>
    </a-menu>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  props: ['title'],
  data () {
    return {
      menus: [
        {
          id: 1,
          title: '首页',
          icon: 'home',
          path: '/',
          sub: [

          ]
        },
        {
          id: 1,
          title: '用户管理',
          icon: 'user',
          path: '',
          sub: [
            {
              id: 1,
              title: '用户列表',
              icon: '',
              path: '/user',
              sub: [

              ]
            },
            {
              id: 1,
              title: '配置管理',
              icon: '',
              path: '/hello',
              sub: [
                {
                  id: 1,
                  title: '登录配置',
                  icon: '',
                  path: '/hello',
                  sub: [

                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    route (path) {
      console.log(this.$route.path)
      if (this.$route.path !== path) {
        this.$router.push(path)
      }
    }
  }
}
</script>

<style scoped>
#menu-item .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
  color: #fff;
  text-align: center;
  line-height: 32px;
}
</style>
